<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>es6</h1>
    <ol>
        <li>let</li>
        <li>const</li>
    </ol>
    <dl>
        <dt>箭头函数</dt>
        <dd>1、无参数或多个参数时小括号必须得写,有一个参数时可省略不写</dd>
        <dd>2、当代码块语句只有一句时可省略花括号否则需要加花括号并且以return返回</dd>
        <dd>3、当返回值为对象时,省略return的情况下需加上小括号</dd>
        <dt>函数的参数默认值</dt>
        <dd>直接在参数上赋值</dd>
        <dt>操作符...</dt>
        <dd>...就是Spread/Rest操作符,具体是(Spread)展开还是(Rest)可变数量参数,需要看上下文语境</dd>
        <dt>对象的解构</dt>
        <dd>解构表示从数组和对象提取值并赋值给独特<br>的变量,解构对象即获取对象中的属性值</dd>
        <dt>对象的重构</dt>
        <dd>重构表示与解构相反</dd>
        <dt>for...of循环</dt>
        <dd>只循环访问对象中的值</dd>
    </dl>
    <h1>作业</h1>
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
</body>
<script>
    //let定义  作用域不同
    /*
    {
        let i=10;
        var j=20;
    }
    console.log(j);//20
    // console.log(i);//报错
    for(var a=0;a<10;a++){
        console.log("var a="+a);
    }
    console.log("外面var a="+a);//10
    for(let b=0;b<10;b++){
        console.log("let b="+b);
    }
    // console.log("外面let b="+b);//报错

    var arr=[];
    for(let i=1;i<10;i++){
        arr[i]=function(){
            console.log(i);
        }
    }
    arr[6]()//6
    */

    //const 常量 用来声明只读变量    作用域与let一样
    /*
    const PI=3.14;
    // PI=12;//报错
    const stu={};//对象 stu的内存地址不能被修改
    stu.name="temo";
    console.log(stu.name);
    stu=new Object();//报错
    */

    //箭头函数(是一种简写方式)
    //无参无返    
    /*let fn1=function(){
        console.log("无参无返");
    }
    fn1();
    let fn2=()=> console.log("无参无返2");
    fn2();*/
    //有参无返
    /*let fn1=function(name,age){
        console.log("有参无返"+name+age);
    }
    fn1("碰磕1",17);
    let fn2= (name,age)=>console.log("有参无返"+name+age);
    fn2("碰磕2",18);*/


    //无参有返
    /*let fn3=function(){return 50;}
    console.log("返回值="+fn3());
    let fn4=()=>100;
    console.log("返回值="+fn4());*/

    //有参有返
    /*
    let fn3=function(a,b){return a+b;}
    console.log("a+b="+fn3(3,5));
    let fn4=(a,b)=>{
        console.log("参数a="+a);
        console.log("参数b="+b);
        return a+b;
    };
    console.log("a+b="+fn4(6,7));
    */
   //返回值为对象
    /*
    var fn5=function(){
       return {'name':'碰磕','age':18};
    }
    console.log(fn5().name);//碰磕
    var fn6=()=>({'name':'碰磕','age':18});
    console.log(fn6().age);//18
    */

   //函数的参数默认值
   /*
    function hello(name='无名氏'){
        console.log("hello:"+name);
    }
    hello('碰磕');*/

    //...操作符的展开模式   spread
    /*
    function foo(x,y,z){
        console.log("三个数的和为="+(x+y+z));
    }
    let arr=[3,2,1];
    foo(...arr);
    //当被用于函数传参时,是一个可变数量参数 Rest
    function foo1(...args){
        console.log(args);  //args为数组
    }
    foo1(1,2,3,4,5);
    */

   //对象解构
   /*
   let stu={
       name:'碰磕',
       age:18,
       sex:'男'
   };
   //ES5语法
   
   //var name=stu.name;
   //var age=stu.age;
   //var sex=stu.sex;
   
   //ES6语法(变量名必须要与属性名同名)
   let {name,age,sex}=stu;
   console.log(name);//碰磕
   console.log(age);//18
   console.log(sex);//男*/
   
   //数组解构
   /*
   let arr=['aa','bb','cc'];
   let [x,y,z]=arr;
   console.log(x,y,z);
   */
   //重构
   /*
   let name='人马';
   let age=18;
   let sex='男';
   let stu={name,age,sex};
   console.log(stu);
   */

  //for...of循环
  /*
  let arr=['aa','bb','cc','dd'];
  Array.prototype.fn=function(){};//给Array的原型添加函数
  //普通for循环不能循环出函数
//   for(let i=0;i<arr.length;i++){
//       console.log(arr[i]);
//   }
 //for...in会把所有属性都循环出来
//   for(let i in arr){
//       console.log(arr[i]);
//   }
    for(let num of arr){
        console.log(num);//num是值
    }
    */


    //--------------------------------------------
    /*ES6语法完成：
1、给页面中的所有按钮绑定点击事件，当点击这些按钮时弹出“这个页面的第几个按钮”。
2、分别定义无参无返回，有参无返回，无参有返回和有参有返回的箭头函数，并且调用它。
3、定义三个变量snum,name,classroom三个变量，通过重构将这三个变量合并成一个对象。
4、var dog = {n:"旺财",weight:2,color:"黑色"};通过解构取出旺财的所有属性值。
5、定义一个学生对象，包含一个eat方法，通过解构取出这个方法并调用它。
6、定义一个没有参数个数限制的函数，打印出输入的参数个数。
*/
    //1
    let btns=document.querySelectorAll("button");
    for(let i=1;i<=btns.length;i++){
        btns[i-1].onclick=()=>console.log("这个页面的第"+i+"个按钮");
    }
    //2
    //无参无返
    let fun1=()=>console.log("Homework无参无返");
    fun1();
    //有参无返
    let fun2=num=>console.log("Homework有参无返"+num);
    fun2(2);
    //无参有返
    let fun3=()=>"Homework无参有返";
    console.log(fun3());
    //有参有返
    let fun4=num=>"Homework有参有返"+num;
    console.log(fun4(4));
    
    //3
    let snum='001';
    let name='碰磕';
    let classroom='C1901';
    let stu1={snum,name,classroom};
    console.log(stu1);
    //4
    var dog = {n:"旺财",weight:2,color:"黑色"};
    let {n,weight,color}=dog;
    console.log(n);
    console.log(weight);
    console.log(color);
    //5
    let student={
        eat:()=>  console.log("我要吃好吃的")
    }
    let {eat}=student;
    eat();
    //6
    let fun6=(...param)=>{
        console.log("输入参数的个数:"+param.length);
    }
    fun6(1,2,3,4,5)
</script>


</html>